<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(function() {
                    //jq事件
                    $('input:radio[name="dbTypeName"]').change(function(){
                        $("#page").val(1);
                    });
                    //提交
                    $("#submitBtn").click(function(){
                        $("#page").val(1);
                        $("#searchForm").submit();
                    });
                });
            });
            var forward = function(direction) {
                if(direction == "prev"){
                    $("#page").val(parseInt($("#page").val()) - 1);
                } else {
                    $("#page").val(parseInt($("#page").val()) + 1);
                }
                $("#searchForm").submit();
            }
        </script>
    </head>

    <body>
        <div class="container">
            <div class="panel-heading">
                <h5 align="center">全文检索</h5>
            </div>
            <div class="row">
                <form id="searchForm" class="form-horizontal" role="form" action="/item/paging" method="post">
                    <input type="hidden" id="page" name="page" th:value="${page == null ? 1 : page}" />
                    <input type="hidden" id="size" name="size" value="10" />

                    <div class="form-group">
                        <!--
                            通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
                         -->
                        <div class="col-md-6 col-md-push-3" style="text-align:center">
                            <input type="text" class="form-control" id="key" name="key" th:value="${key}"
                                   placeholder="请输入关键字">
                        </div>
                    </div>
                    <!--
                    <div class="form-group form-inline">
                        <div class="col-md-10 col-md-offset-3">
                            <div th:each="hot:${hotWords}" class="col-sm-1">
                                <a href="#" th:text="${hot}"></a>
                            </div>
                        </div>
                    </div>
                    -->
                    <div class="form-group form-inline">
                        <div class="col-md-6 col-md-push-3" style="text-align:center">
                            <div class="radio-box">
                                <input type="radio" id="dbTypeName" name="dbTypeName"
                                       th:each ="dbType:${dbTypeList}"
                                       th:value="${dbType}"
                                       th:text ="${dbType}"
                                       th:attr ="checked=${dbType == dbTypeName ? true:false}">
                            </div>
                        </div>
                        <div class="col-md-3 col-md-push-4">
                            <label>耗时：</label><span th:text="${elapsed}"></span> 毫秒
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-push-6 col-sm-12" style="text-align:center">
                            <button type="button" id="submitBtn" class="btn btn-info">搜索</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="row">
                <div class="col-md-4 col-md-push-10">
                    共<font color="red"><span th:text="${totalRow}"></span></font>条结果 &nbsp;&nbsp;
                    <span th:text="${pageNum == null ? 0 : pageNum}"></span>/<span th:text="${totalPage == null ? 0 : totalPage}"></span>
                </div>
            </div>
            <div class="row">
                <div class="container">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th class="col-md-1">编号</th>
                                <th class="col-md-4">标题</th>
                                <th class="col-md-7">内容</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="itemDesc, iterStat : ${resultList}">
                                <td th:utext="${itemDesc.id}"></td>
                                <td th:utext="${itemDesc.title}"></td>
                                <td th:utext="${itemDesc.content}"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- 分页 -->
            <div class="row">
                <div class="col-md-6 col-md-push-3">
                    <nav aria-label="...">
                        <ul class="pager">
                            <li><a href="javascript:void(0)" onclick="forward('prev')">上一页
                            </a></li>
                            <li><a href="javascript:void(0)" onclick="forward('next')">下一页</a></li>
                        </ul>
                    </nav>
                    <!--<nav aria-label="Page navigation">-->
                        <!--<ul class="pagination">-->
                            <!--<li>-->
                                <!--<a href="#" aria-label="Previous">-->
                                    <!--<span aria-hidden="true">&laquo;</span>-->
                                <!--</a>-->
                            <!--</li>-->
                            <!--<li><a href="#">1</a></li>-->
                            <!--<li><a href="#">2</a></li>-->
                            <!--<li><a href="#">3</a></li>-->
                            <!--<li><a href="#">4</a></li>-->
                            <!--<li><a href="#">5</a></li>-->
                            <!--<li>-->
                                <!--<a href="#" aria-label="Next">-->
                                    <!--<span aria-hidden="true">&raquo;</span>-->
                                <!--</a>-->
                            <!--</li>-->
                        <!--</ul>-->
                    <!--</nav>-->
                </div>
            </div>
        </div>
    </body>


</html>